
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <!-- <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台><router-link to="/finance/financenumber">返利号码</router-link></div>
          --><div class="hei10"></div>

                <div class="powertop">
                <!-- <router-link class="powertopli " to="/finance/finance">返利报表</router-link> -->
                <router-link class="powertopli powertopact" to="/finance/financenumber">返利号码</router-link>
<!--                <router-link class="powertopli" to="/finance/financemoney">收入导入</router-link>
                <router-link class="powertopli" to="/finance/fiancelist">佣金发放生成表格</router-link>
                <router-link class="powertopli" to="/finance/fiancelist2">佣金核销选择客户</router-link> -->
                </div>

                <div class="conlist" v-loading='loading'>
                    <div class="flex">
                        <div class="gong gl">
                            <el-input v-model="mobile" placeholder="请输入手机号码"></el-input>
                            <el-input v-model="sku" placeholder="请输入商品货号"></el-input>
                            <el-date-picker v-model="monthsearch" type="month" value-format="yyyy-MM" placeholder="选择月份"> </el-date-picker>
                            <el-button type="danger" @click="search">检索</el-button>
                        </div>
                    </div>
                    <div class="flex">
                        <div class="gong gl">
                            <el-button type="danger" @click="daochu">导出返利明细</el-button>
                            <template  v-if="user_id== 302756 || user_id== 50387">
                              <el-button type="danger" @click="fanliuploadlog = true">导入返利号码数据</el-button>
                              <el-button type="text" @click="xiazai">模板下载</el-button>
                            </template>
                        </div>

                    </div>
                    <div class="list">

                        <div class="th">号码</div>
                        <div class="th">商品编码</div>
                        <div class="th">月份</div>
                        <div class="th">返利次数</div>
                        <div class="th">当月返利积分</div>
                        <div class="th">已领取积分</div>
                        <div class="th">本月领取状态</div>
                        <div class="th td2">操作</div>
                    </div>
                    <div class="list" v-for="item in list" :key="item.id">

                        <div class="td">{{item.mobile}}</div>
                        <div class="td">{{item.fetch_code}}</div>
                        <div class="td">{{item.month}}</div>
                        <div class="td">{{item.cycle}}</div>
                        <div class="td">{{item.rebate_amount}}</div>
                        <div class="td">{{item.received_amount}}</div>
                        <div class="td">{{item.status_name}}</div>

                        <div class="td td2">
                            <el-button type="text" @click="fixtime(item.order_id,item.mobile,item.month)" v-if="item.rebate_one != ''">修改时间</el-button>
                            <el-button type="text" @click="stopget(item.id)" v-if="item.status == 100">暂停领取</el-button>
                            <el-button type="text" @click="startget(item.id)" v-if="item.status == -100">开启领取</el-button>
                            <el-button type="text" @click="tongji(item.id)">号码概况</el-button>
                        </div>
                    </div>
                    <el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
                </div>
            </div>
        </div>
        <el-dialog :title="choose.mobile" :visible.sync="tongjilog" width="400px" :close-on-click-modal='false'>
            <div class="daowei">所属商品编码:<span class="daowei2">{{choose.good_sku}}</span></div>
            <div class="daowei">返利次数:<span class="daowei2">{{choose.cycle}}</span></div>
            <div class="daowei">已领取次数:<span class="daowei2">{{choose.rebate_cycle}}</span></div>
            <div class="daowei">已领取积分:<span class="daowei2">{{choose.points}}</span></div>
            <div class="daowei">已充值话费:<span class="daowei2">{{choose.recharged_amount}}</span></div>
            <div class="daowei">充值记录:</div>
            <div v-for="item in choose.recharged_logs" :key="item.id">
              于{{item.created_at}}充值￥{{item.amount}}元
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="tongjilog = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="返利号码导入" :visible.sync="fanliuploadlog" width="600px" :close-on-click-modal='false'>
            <!-- <div class="listupload listth">
                <div class="li">月份</div>
                <div class="li">导入情况</div>
                <div class="li">操作</div>
            </div>
            <div class="listupload">
                <div class="li">{{uploadmon1}}返利数据</div>
                <div class="li"><upload-excel-component @on-selected-file="exportData" @click="riqi(uploadmon1)" buttonName="点击导入"></upload-excel-component></div>
                <div class="li zhui"><upload-excel-component @on-selected-file="exportData" @click="riqi(uploadmon1)"  buttonName="追加数据"></upload-excel-component></div>
            </div>
            <div class="listupload">
                <div class="li">{{uploadmon2}}返利数据</div>
                <div class="li"><upload-excel-component @on-selected-file="exportData"  @click="riqi(uploadmon2)"  buttonName="点击导入"></upload-excel-component></div>
                <div class="li zhui"><upload-excel-component @on-selected-file="exportData" @click="riqi(uploadmon2)"  buttonName="追加数据"></upload-excel-component></div>
            </div>
            <div class="listupload">
                <div class="li">{{uploadmon3}}返利数据</div>
                <div class="li">未到期</div>
                <div class="li zhui"></div>
            </div> -->
            <el-form ref="form" @submit.native.prevent label-width="80px">
                <el-form-item label="选择日期:">
                    <el-select v-model="uptime" placeholder="请选择" @change="uploadx">
                        <el-option :label="uploadmon1" :value="uploadmon1"></el-option>
                        <el-option :label="uploadmon2" :value="uploadmon2"></el-option>
                        <el-option :label="uploadmon3" :value="uploadmon3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="导入情况:" class="listupload">
                    已导入{{uploadsuceess}}条,已导入{{uploadtimes}}次。
                </el-form-item>
                <el-form-item label="导入数据:" class="listupload">
                    <upload-excel-component @on-selected-file="exportData" :buttonName="btnname" v-if="uploading"></upload-excel-component>

                    <el-button type="primary" :loading="true" v-if="!uploading">加载中</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>

        <el-dialog title="导入结果" :visible.sync="shoplog" :close-on-click-modal="false" width="600px">
              <div>
                  <div style="color: #077ECE; line-height: 30px;">成功{{shoplist.success}}条</div>
                  <div style="color: #DF3434; line-height: 30px;">失败及原因：
                      <div v-for="(item,i) in shoplist.error" :key="i">
                          订单ID为:{{i}}的结果{{item}}
                      </div>
                  </div>
              </div>
              <div slot="footer" class="dialog-footer">
                  <el-button type="primary" size="small"  @click="shoplog = false">好的</el-button>
              </div>
        </el-dialog>
        <el-dialog title="修改返利领取时间" :visible.sync="monthfixlog" :close-on-click-modal="false" width="600px">
            <el-form ref="form" @submit.native.prevent label-width="80px">
                <el-form-item label="起始月份:">
                    <el-date-picker v-model="monthfix" type="month" value-format="yyyy-MM" placeholder="选择起始月份"> </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                  <el-button type="primary" size="small"  @click="fixtimego">好的</el-button>
              </div>
        </el-dialog>
        <!-- <foot></foot> -->
    </div>

</template>

<script>
    import axios from 'axios'
    import top from '@/components/top.vue'
    import left from '@/components/left.vue'
    import foot from '@/components/foot.vue'
    import moment from "moment";
    import UploadExcelComponent from "@/components/UploadExcel/index.vue";

    export default {
        components: {
            "left": left,
            "top": top,
            "foot": foot,
            UploadExcelComponent
        },
        name: "financenumber",
        data() {
            return {
                monthfixlog:false,
                monthfix:"",
                monthfixall:{},

                shoplog:false,
                shoplist:"",

                btnname:"点击导入",
                uploading:true,
                form:{},
                fanliuploadlog:false,
                uploadsuceess:"",
                uploadtimes:"",
                uploadmon1:"",
                uploadmon2:"",
                uploadmon3:"",
                uptime:"",
                month:"",
                monthsearch:"",
                total:0,
                pagesize:20,
                page:1,
                list:"",
                loading:true,
                form:"",
                mobile:"",
                sku:"",
                tongjilog:false,
                choose:{ },
                url:"",

                user_id: ''

            }
        },
        created() {
            this.url = window.location.origin+"/91haoka_platform/"
            var shop = JSON.parse(localStorage.getItem('SHOP'));
            this.shopname = shop.shop_name
            var user = JSON.parse(localStorage.getItem('USER'));
            this.user_id = user.id
            var that = this

            this.monthsearch = moment().format("YYYY-MM");
            this.uploadmon1 = moment().subtract(1, 'months').format("YYYY-MM");
            this.uptime = moment().format("YYYY-MM");
            this.uploadmon2 = moment().format("YYYY-MM");
            this.uploadmon3 = moment().add(1, 'months').format("YYYY-MM");

            console.log(moment().format("YYYY-MM"))

            this.getlist()
            this.uploadx()
        },
        mounted() {

        },
        methods: {
            //获取导入详情
            uploadx:function(){
                var that = this
                axios.get('/api/plan-market/rebate/import/logs?month='+this.uptime)
                	.then(response => {
                		if(response.data.msg.code == 0){
                            that.uploadsuceess = response.data.data[0].success
                            that.uploadtimes = response.data.data[0].times
                		}else{
                			that.$message.error(response.data.msg.info);
                		}
                	})
            },
            //统计
            tongji:function(id){
                var that = this
                axios.get('/api/plan-market/rebate/log/detail?log_id='+id)
                	.then(response => {
                		if(response.data.msg.code == 0){
                            that.choose = response.data.data
                		}else{
                			that.$message.error(response.data.msg.info);
                		}
                	})
                this.tongjilog = true
            },
            //修改时间
            fixtime:function(id,mobile,month){
                this.monthfixall.id = id
                this.monthfixall.mobile = mobile
                this.monthfixall.month = month
                this.monthfixlog = true
            },
            fixtimego:function(){

                var qtime = this.monthfixall.month.toString()
                qtime = qtime.substr(0,4) + '-' + qtime.substr(5,2)

                var that = this
                axios.post("/api/plan-market/rebate/log/cycle", {order_id:this.monthfixall.id,mobile:this.monthfixall.mobile,month_ago:qtime,month_now:this.monthfix})
                    .then(function(response) {
                        if (response.data.msg.code == 0) {
                            that.monthfixlog = false
                            that.getlist()
                        }else{
                            that.$message.error(response.data.msg.info);
                        }
                    })
            },
            //暂停领取
            stopget:function(id){
                this.loading = true
                var that = this
                axios.post("/api/plan-market/rebate/log/status", { log_id:id,status:-100})
                    .then(function(response) {
                        if (response.data.msg.code == 0) {
                            that.getlist()
                        }else{
                            that.$message.error(response.data.msg.info);
                        }
                    })
            },
            //开放领取
            startget:function(id){
                this.loading = true
                var that = this
                axios.post("/api/plan-market/rebate/log/status", { log_id:id,status:100})
                    .then(function(response) {
                        if (response.data.msg.code == 0) {
                            that.getlist()
                        }else{
                            that.$message.error(response.data.msg.info);
                        }
                    })
            },
            //导出
            daochu:function(){
                axios.get('/api/plan-market/rebate/export?month='+this.monthsearch)
                	.then(response => {
                		if(response.data.msg.code == 0){
                            location.href = response.data.data
                		}else{
                			that.$message.error(response.data.msg.info);
                		}
                	})
            },
            search:function(){
                this.getlist()
            },
            //翻页
            fanye:function(page){
            	this.loading = true
            	this.page = page
            	this.getlist()
            },
            //获取列表
            getlist:function(){
                var that = this
                if(this.monthsearch == null){
                    this.monthsearch = ''
                }
                axios.get('/api/plan-market/rebate/list?page='+this.page+'&page_size='+this.pagesize+'&month='+this.monthsearch+'&mobile='+this.mobile+'&sku='+this.sku)
                	.then(response => {
                		if(response.data.msg.code == 0){
                            that.list = response.data.data.data
                            that.total = response.data.data.total
                            that.loading = false
                		}else{
                			that.$message.error(response.data.msg.info);
                		}
                	})
            },
             //下面使用的格式化时间
             formatDate:function(numb) {
               const time = new Date((numb - 1) * 24 * 3600000 + 1)
               time.setYear(time.getFullYear() - 70)
               const year = time.getFullYear() + ''
               const month = time.getMonth() + ''
               let date = time.getDate() + ''
               if(time.getFullYear()%4 === 0){
                 var X = moment([year, month, date]).subtract(1, 'days').format('YYYY-MM-DD');
               }else{
                 var X = moment([year, month, date]).format('YYYY-MM-DD');
               }
               return X
             },
            //下载模板
            xiazai:function(){
                const a = document.createElement('a');
            	a.setAttribute('download', '导入返利号码模板.xlsx');
            	a.setAttribute('href', this.url+'static/uploadrebate.xlsx');
            	a.click();
            },
            //导入
            exportData(data) {

                this.shoplog = true
                var that = this;
                var list = [];
                //导入的是激活状态的情况
                for (var i = 0; i < data.results.length; i++) {
                    var obj = {};
                    console.log(data.results[i]["*订单ID*"])
                    if(data.results[i]["*订单ID*"] != undefined){
                        obj["id"] = parseInt(data.results[i]["*订单ID*"])
                    }
                    if(data.results[i]["*返利号码*"] != undefined){
                        obj["rebate_mobile"] = data.results[i]["*返利号码*"];
                    }
                    if(data.results[i]["激活状态"] != undefined){
                        obj["active_status"] = data.results[i]["激活状态"];
                    }
                    if(data.results[i]["*激活时间*"] != undefined){
                        obj["active_time"] = that.formatDate(parseInt(data.results[i]["*激活时间*"]));
                    }
                    if(data.results[i]["欠费状态"] != undefined){
                        obj["is_owed"] = data.results[i]["欠费状态"];
                    }
                    if(data.results[i]["是否发放返利"] != undefined){
                        obj["rebate"] = data.results[i]["是否发放返利"];
                    }
                    console.log(obj)
                    list.push(obj);
                }

                axios.post("/api/plan-market/rebate/import", { data: list,month: this.uptime})
                    .then(function(response) {
                        if (response.data.msg.code == 0) {
                            that.fanliuploadlog = false
                            that.shoplist = response.data.data
                        }else{
                            that.$message.error(response.data.msg.info);
                        }
                    })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .index{
        .listupload{ font-size: 14px;
            .li{flex: 1; line-height: 38px; margin-top: 20px;}
            .el-button--primary{ background: #409EFF; color: #ffffff; border: none; }

        }
        .listth{ font-size: 14px;  border-bottom: 1px #EAEAEA solid; font-weight: bold;}
        .daowei{ margin-bottom: 20px;}
        .daowei2{ color: #DD2727; margin-left: 10px;}
        .moneylist{ display: flex;}
        .erimg{ width: 200px;}
        .red{ border: 1px #FF3B3B solid !important; color: #FF3B3B !important;}
        .moneylist div{ border: 1px #AAAAAA solid; width: 85px; height: 35px; line-height: 35px; text-align: center; margin-right: 10px; cursor: pointer;}

                .title{border-bottom: 1px #EAEAEA solid;  line-height: 45px; padding-left: 30px; font-size: 16px; background: #F9F9F9; color: #727272}


            .powertop{ display: flex; background:#f9f9f9; }
            .powertopli{ flex-basis: 160px; line-height: 45px; border-top: 4px #EBECEF solid; color: #727272; border-right: 1px #EAEAEA solid; font-size: 14px; text-align: center;}
            .powertopact{ background: #FFFFFF; border-top: 4px #DD2727 solid;}
            .con{  background: #FFFFFF; padding: 30px 40px; display: flex; justify-content: space-between;
                .conleft{
                    .flex{ display: flex; margin-bottom: 20px;}
                    .gong{ margin-right: 30px; color: #333}
                }
                // .conright{
                //     .el-input__inner{ line-height: 40px !important; height: 40px !important;}
                // }
            }
            /deep/ .el-input{ width: 250px; margin-right: 20px;}
            .conlist{ padding: 30px; background: #FFFFFF;
                .flex{ display: flex; justify-content: space-between}
                .gong{ display: flex;
                    // .el-input__inner{ width: 250px;}
                    // .el-button--danger{ margin-left: 20px;}
                    // .el-button--primary{ padding: 10px 30px; background: #EEF7FF; border: 1px #EEF7FF solid; margin-left: 20px;}
                    // .el-date-editor--month{ margin-right: 20px;}
                }
                .gl{ margin-bottom: 20px;
                    // .el-input__inner{ width: 200px !important; }
                    // .el-button--danger{ margin-left: 0px !important; margin-right: 20px;}
                    // .el-input__icon{ line-height: 36px;}
                }
                .list{ display: flex; border-bottom: 1px #eaeaea solid;
                    .th{ background: #EAEAEA; text-align: center; flex: 1; padding: 15px 0; font-size: 14px;}
                    .td{ background: #ffffff; text-align: center; flex: 1; padding: 15px 0; font-size: 14px; line-height: 40px;}
                    .td2{ flex: 1.5}
                }
                .el-pagination{ text-align: right; margin: 20px 0}
            }

    }
</style>
